<template>
  <div>
    <Header ></Header>
    <div class="categoryNav">
      <div class="sortWay">
        <i class="iconfont icon-wendangleixingx" :class="isSort ? 'iconActive' : ''" @click="changeSort(true)"></i>
        <i class="iconfont icon-shijian1" :class="isSort ? '' : 'iconActive'" @click="changeSort(false)"></i>
      </div>
    </div>
    <div class="list" v-if="!isSort">
      <div class="listItem" v-for="(item, key, index) in list" :key="index">
        <div v-for="(items, keys, indexs) in item" :key="indexs">
          <div class="date">
            {{ enMon[keys - 1] + ' / '+ key }}
          </div>
          <div v-for="(it, ind) in items" :key="ind" class="info">
            <div class="infoItem">
              <div class="Box">
                <img src="../assets/img/default.jpg" alt="">
                <div class="content">
                  <div class="title" @click="toDetail(it.id)">
                    <span class="articleTitle">{{ it.title }}</span>
                  </div>
                  <div class="tips">
                    <i class="iconfont menuIcon icon-xihuan"></i>
                    <span class="nums">{{ it.like }}</span>
                    <i class="iconfont menuIcon icon-pinglun"></i>
                    <span class="nums">{{ it.discuss }}</span>
                    <i class="iconfont menuIcon icon-lishuyu"></i>
                    <span class="nums">{{ it.articleType.typeName }}</span>
                  </div>
                </div>
              </div>
              <div class="day">
                {{ dayToEn(it.createTime) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list" v-else>
      <div class="listItem" v-for="(items, key, indexs) in list" :key="indexs">
        <div class="date">
          {{ key }}
        </div>
        <div v-for="(item, index) in items" :key="index" class="info">
          <div class="infoItem">
            <div class="Box">
              <img src="../assets/img/default.jpg" alt="">
              <div class="content">
                <div class="title" @click="toDetail(item.id)">
                  <span class="articleTitle">{{ item.title }}</span>
                </div>
                <div class="tips">
                  <i class="iconfont menuIcon icon-xihuan"></i>
                  <span class="nums">{{ item.like }}</span>
                  <i class="iconfont menuIcon icon-pinglun"></i>
                  <span class="nums">{{ item.discuss }}</span>
                  <i class="iconfont menuIcon icon-danyehuaban"></i>
                  <span class="nums">{{ item.createTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <load-more :loadType="loadType" @getList="getList"></load-more>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { Article } from '../plugin/request'
import { dateFormat } from '../plugin/index'
import Header from '../components/header.vue'
import { useRouter } from 'vue-router'
import { setScroll } from '../plugin/index'
import LoadMore from '../components/loadMore.vue'
export default {
  components: {
    Header,
    LoadMore
  },
  setup() {
    const state = reactive({
      loadType: 1,
      isShowStyle: false,
      page: 1,
      list: {
        0: {
          1: [{
            articleType: {
              typeName: ''
            },
            createTime: ''
          }]
        }
      },
      enMon: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      enDay: ['st', 'nd', 'rd', 'th'],
      isSort: false
    })
    onMounted(() => {
      dom = document.querySelector('.indexBox')
      getArticle()
    })
    const dayToEn = (str) => {
      if(!str) return
      let enday = new Date(str).getDate()
      let day= ''
      if((enday % 10) < 1 || (enday % 10) > 3){
        day = state.enDay[3]
      }else {
        day = state.enDay[enday % 10 - 1]
        if(enday == 11 || enday == 12){
          day = state.enDay[3]
        }
      }
      return enday + day
    }
    const changeSort = bool => {
      if(state.isSort == bool) return
      state.list = {
        0: {
          1: [{
            articleType: {
              typeName: ''
            },
            createTime: ''
          }]
        }
      }
      state.page = 1
      state.isSort = bool
      getArticle()
    }
    const getArticle = async () => {
      let { data } = await Article({page: state.page})
      if(data.status == 1){
        if(data.data.data.length < 5){
          state.loadType = 2
        }else{
          if(state.page != 1) toBottom()
          state.loadType = 1
        }
        state.isSort ? sortCate(data.data.data) : sortTime(data.data.data)
      }
    }
    let dom;
    const toBottom = () => {
      setScroll(dom)
    }
    const sortCate = item => {
      let typeName;
      item = item.reduce((total, val) => {
        typeName = val.articleType.typeName
        total[typeName] = total[typeName] || []
        total[typeName].push(val)
        return total
      },{})
      state.page == 1 ? state.list = item : state.list.push(...item)
      console.log(item)
    }
    const sortTime = item => {
      let time, year, month
      item = item.reduce((total, val) => {
        time = dateFormat(val.createTime)
        year = time.getFullYear()
        month = time.getMonth()
        total[year] = total[year] || {}
        total[year][month] = total[year][month] || []
        total[year][month].push(val)
        return total
      },{})
      state.page == 1 ? state.list = item : state.list.push(...item)
      console.log(item)
    }
    const router = useRouter()
    const toDetail = id => {
      router.push(`/detail/${id}`)
    }

    const getList = () => {
      state.loadType = 3
      state.page++
      setTimeout(() => {
        getArticle()
      }, 3000);
    }
    return {
      ...toRefs(state),
      toDetail,
      dayToEn,
      changeSort,
      getList
    }
  }
}
</script>

<style scoped lang="scss">
.categoryNav{
  width: 1000px;
  margin: 50px auto 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #738192;
  .sortWay{
    .iconfont{
      font-size: 20px;
      margin-right: 10px;
      position: relative;
      cursor: pointer;
      color: #8b9bb0;
      padding: 10px;
      border-radius: 50%;
    }
    .iconActive{
      background-color: #8b9bb0;
      color: #000000;
    }
  }
}
.list{
  width: 1000px;
  margin:  0 auto;
  box-sizing: border-box;
  min-width: 300px;
  .listItem{
    padding: 0 20px 0 0;
    border-bottom: 1px solid #eff8ff;
    .date{
      font-size: 20px;
      color: #f0a500;
      position: relative;
      padding-left: 20px;
      &::before{
        content: '';
        position: absolute;
        background-color: #c9cbff;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .info{
      padding: 20px 0 20px 14px;
      border-left: 1px solid #eff8ff;
      margin-left: 6px;
      &:not(:last-child){
        border-bottom: 1px solid #eff8ff;
      }
      .infoItem{
        display: flex;
        justify-content: space-between;
        .Box{
          display: flex;
          flex: 1;
          img{
            width: 50px;
            height: 50px;
            display: block;
            margin-right: 10px;
            border-radius: 2px;
          }
          .content{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .title{
              color: #838383;
              cursor: pointer;
              font-size: 16px;
              padding-bottom: 10px;
              &:hover{
                color: #98acf8;
                background-size: 20px 20px;
                background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 0, currentColor 9px, transparent 0) radial-gradient(circle at 10px 27px, transparent 8px, currentColor 0, currentColor 9px, transparent 0) repeat-x repeat-x -10px calc(100% + 16px), 0 calc(100% - 4px);
                animation: waveFlow 1s linear infinite;
              }
              .articleTitle{
                overflow: hidden;
                display: -webkit-box;//将元素设为盒子伸缩模型显示
                -webkit-box-orient: vertical;//伸缩方向设为垂直方向
                -webkit-line-clamp: 1;//超出3行隐藏，并显示省略号
              }
              @keyframes waveFlow {
                from { background-position-x: -10px, 0; }
                to { background-position-x: -30px, -20px; }
              }
            }
            .tips{
              display: flex;
              font-size: 12px;
              color: #838383;
              .menuIcon{
                cursor: pointer;
              }
              .nums{
                margin: 2px 10px 0 1px;
              }
            }
          }
        }
        .day{
          padding: 0 20px;
          color: #cbaf87;
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .categoryNav{
    width: 95%;
  }
  .list{
    width: 90%;
  }
  .title{
    font-size: 14px !important;
  }
}
</style>